<template>
  <div class="views-container">
    <div class="crud-group">
      <el-input
        v-model="paramsForm.taskName"
        type="text"
        placeholder="请输入任务日期"
        clearable
      />
      <el-input
        v-model="paramsForm.databaseName"
        type="text"
        placeholder="请输入库名"
        clearable
      />
      <el-input
        v-model="paramsForm.tableNameList"
        type="text"
        placeholder="请输入表名称"
        clearable
      />
      <el-select
        v-model="paramsForm.taskState"
        placeholder="状态"
        clearable
      >
        <el-option
          v-for="item in libTaskStateOption"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <el-date-picker
        v-model="paramsForm.hotStandbyTime"
        type="datetimerange"
        start-placeholder="开始时间"
        end-placeholder="结束时间"
        :default-time="['00:00:00','23:59:59']"
        clearable
      />

      <div style="display: flex">
        <el-button
          type="success"
          icon="el-icon-search"
          @click="SourceDataSearch"
        >
          搜索
        </el-button>
        <el-button
          type="warning"
          icon="el-icon-refresh-left"
          @click="resetLibTaskData"
        >
          重置
        </el-button>
      </div>
    </div>

    <el-table
      ref="table"
      v-loading="isLibTaskLoading"
      :data="sourceData"
      border
    >
      <el-table-column
        label="任务日期"
        prop="taskName"
        sortable
        fixed
        min-width="100px"
      />
      <el-table-column
        label="库名"
        prop="databaseName"
        sortable
      />
      <el-table-column
        label="表名称"
        min-width="60px"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <el-button
            type="text"
            @click="() => {
              selectedTableNameList = scope.row.tableNameList;
              tableNameListDialogVisible = true;
            }
            "
          >
            查看
          </el-button>
        </template>
      </el-table-column>
      <el-table-column
        label="表数量"
        prop="tableHdfsNumber"
        sortable
        show-overflow-tooltip
      />
      <el-table-column
        label="源总量"
        prop="sourceCountNumber"
        sortable
        min-width="90px"
        show-overflow-tooltip
      />
      <el-table-column
        label="目标总量"
        prop="targetCountNumber"
        sortable
        min-width="95px"
        show-overflow-tooltip
      />
      <el-table-column
        label="状态"
        prop="taskState"
        sortable
        min-width="80px"
      >
        <template slot-scope="scope">
          <el-tag
            :type="getStateColor(scope.row.taskState)"
          >
            {{ scope.row.taskState }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column
        label="开始时间"
        prop="createTime"
        sortable
        show-overflow-tooltip
      />
      <el-table-column
        label="结束时间"
        prop="lastUpdateTime"
        sortable
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <span>{{ (scope.row.taskState && scope.row.taskState === '进行中') ? '' : scope.row.lastUpdateTime }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="热备用时"
        prop="standbyTime"
        sortable
      />
      <el-table-column
        fixed="right"
        label="表信息"
        width="60px"
      >
        <template slot-scope="scope">
          <el-button
            type="text"
            @click="() => {
              selectedTaskId = scope.row.id;
              dialogVisible = true;
              getLibData();
            }
            "
          >
            查看
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-container">
      <el-pagination
        :current-page="paramsForm.current"
        :page-size="paramsForm.size"
        layout="prev, pager, next,sizes,total"
        :total="libTaskTotal"
        @size-change="handleSizeChange1"
        @current-change="handleCurrentChange1"
      />
    </div>

    <el-dialog
      center
      title="库同步日志"
      :visible.sync="dialogVisible"
      width="70%"
      :before-close="dialogVisibleclose"
    >
      <div>
        <div class="crud-group">
          <el-input
            v-model="libParamsForm.libraryTableName"
            type="text"
            placeholder="请输入表名称"
            clearable
          />
          <el-select
            v-model="libParamsForm.taskState"
            placeholder="状态"
            clearable
          >
            <el-option
              v-for="item in libStateOption"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <div>
            <el-button
              type="success"
              icon="el-icon-search"
              @click="TableDataSearch"
            >
              搜索
            </el-button>
            <el-button
              type="warning"
              icon="el-icon-refresh-left"
              @click="resetLibData"
            >
              重置
            </el-button>
            <el-button
              type="warning"
              icon="el-icon-refresh-left"
              @click="rerun"
            >
              重跑
            </el-button>
          </div>
        </div>

      </div>

      <el-table
        ref="table"
        v-loading="isLibLoading"
        :data="tableData"
        @selection-change="handleSelectionChange"
        border
      >
        <el-table-column type="selection" width="55" />
        <el-table-column
          label="任务日期"
          prop="taskName"
          sortable
          min-width="100px"
        />
        <el-table-column
          label="表名称"
          prop="libraryTableName"
          sortable
          min-width="200px"
          show-overflow-tooltip
        />
        <el-table-column
          label="源总量"
          prop="sourceCountNumber"
          sortable
          show-overflow-tooltip
        />
        <el-table-column
          label="目标总量"
          prop="targetCountNumber"
          sortable
          show-overflow-tooltip
        />
        <el-table-column
          label="耗时"
          prop="hotStandbyTime"
          sortable
          min-width="100px"
        />
        <el-table-column
          label="状态"
          prop="taskState"
          sortable
          min-width="80px"
        >
          <template slot-scope="scope">
            <el-tag
              :type="getStateColor(scope.row.taskState)"
            >{{ scope.row.taskState }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          label="详情"
          min-width="60px"
        >
          <template slot-scope="scope">
            <el-button
              type="text"
              @click="() => {
                detailsDialogVisible = true;
                getDetail(scope.row.log);
              }
              "
            >
              查看
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-container">
        <!--分页组件-->
        <el-pagination
          :current-page="libParamsForm.current"
          :page-size="libParamsForm.size"
          layout="prev, pager, next,sizes,total"
          :total="libTotal"
          @size-change="handleSizeChange2"
          @current-change="handleCurrentChange2"
        />
      </div>
      <span
        slot="footer"
        class="dialog-footer"
        style="text-align: center"
      >
        <el-button
          type="primary"
          @click="dialogVisibleclose"
        >关闭</el-button>
      </span>

      <table-details-dialog
        :append-to-body="true"
        :dialog-visible="detailsDialogVisible"
        :details="tableDetail"
        @close="detailsDialogVisible = false"
      />
    </el-dialog>

    <TableNameListDialog
      :dialog-visible="tableNameListDialogVisible"
      :table-name-list="selectedTableNameList"
      @close="tableNameListDialogVisible = false"
    />
  </div>
</template>

<script>
import logAnalysisApi from '@/api/logAnalysis/index'
import TableDetailsDialog from './components/TableDetailsDialog.vue'
import dateUtils from '@/utils/date'
import TableNameListDialog from './components/TableNameListDialog.vue'

export default {
  components: {
    TableDetailsDialog,
    TableNameListDialog
  },
  data() {
    return {
      isLibTaskLoading: false,
      isLibLoading: false,
      libTaskTotal: 0,
      libTotal: 0,
      paramsForm: {
        databaseName: '',
        tableNameList: '',
        current: 1,
        size: 20,
        sourceName: '',
        taskDate: '',
        taskState: '',
        hotStandbyTime: [
          new Date(new Date().setHours(0, 0, 0, 0)),
          new Date(new Date().setHours(0, 0, 0, 0) + 24 * 60 * 60 * 1000 - 1)
        ]
      },
      libParamsForm: {
        current: 1,
        size: 10,
        taskId: '',
        standbyTime: '',
        libraryTableName: '',
        taskState: ''
      },
      libTaskStateOption: [
        {
          label: '已完成',
          value: '已完成'
        },
        // {
        //   label: '待执行',
        //   value: '待执行'
        // },
        {
          label: '进行中',
          value: '进行中'
        },
        {
          label: '失败',
          value: '失败'
        },
        {
          label: '重跑中',
          value: '重跑中'
        }
      ],
      libStateOption: [
        {
          label: '失败',
          value: '失败'
        },
        {
          label: '已完成',
          value: '已完成'
        },
        {
          label: '进行中',
          value: '进行中'
        },
        {
          label: '忽略',
          value: '忽略'
        },
        {
          label: '重跑中',
          value: '重跑中'
        }
      ],

      dialogVisible: false,
      sourceTimeSpendDialogVisible: false,
      detailsDialogVisible: false,
      tableNameListDialogVisible: false,
      sourceTimeSpendData: '',
      tableTimeSpendData: '',
      selectedTaskId: '',
      selectedTableNameList: '',
      tableDetail: '',
      sourceData: [],
      tableData: [],
      multipleSelection: [],
    }
  },
  created() {
    if (this.$route.query.taskState) {
      this.paramsForm.taskState = this.$route.query.taskState
    }
    if (
      this.$route.query.taskStateTable ||
      this.$route.query.taskStateTable === ''
    ) {
      this.dialogVisible = true
      this.libParamsForm.taskState = this.$route.query.taskStateTable
      this.getLibData(false)
    }

    this.getLibTaskData()
  },
 
  methods: {
    getStateColor(state) {
      if (state === '已完成') {
        return 'success'
      } else if (state === '失败') {
        return 'danger'
      } else if (state === '进行中') {
        return ''
      } else {
        return 'warning'
      }
    },
    getLibTaskData() {
      this.isLibTaskLoading = true
      this.paramsForm.staDate = dateUtils.getDateStr(this.paramsForm.hotStandbyTime ? this.paramsForm.hotStandbyTime[0] : '')
      this.paramsForm.endDate = dateUtils.getDateStr(this.paramsForm.hotStandbyTime ? this.paramsForm.hotStandbyTime[1] : '')
      logAnalysisApi.getLibTask(this.paramsForm)
        .then((res) => {
          this.sourceData = res.records
          this.libTaskTotal = res.total
        })
        .finally(() => {
          this.isLibTaskLoading = false
        })
    },
    resetLibTaskData() {
      this.paramsForm = {
        ...this.paramsForm,
        current: 1,
        sourceName: '',
        taskDate: '',
        taskState: '',
        databaseName: '',
        hotStandbyTime: [
          new Date(new Date().setHours(0, 0, 0, 0)),
          new Date(new Date().setHours(0, 0, 0, 0) + 24 * 60 * 60 * 1000 - 1)
        ]
      }
      this.getLibTaskData()
    },
    getLibData(showAll = true) {
      this.isLibLoading = true
      const param = this.libParamsForm
      param.taskId = this.selectedTaskId
      if (!showAll) {
        param.staDate = dateUtils.getDateStr(
          new Date(new Date().setHours(0, 0, 0, 0))
        )
        param.endDate = dateUtils.getDateStr(
          new Date(new Date().setHours(0, 0, 0, 0) + 24 * 60 * 60 * 1000 - 1)
        )
      }
      console.log(param)
      logAnalysisApi.getLib(param)
        .then((res) => {
          this.tableData = res.records
          this.libTotal = res.total
        })
        .finally(() => {
          this.isLibLoading = false
        })
    },
    resetLibData() {
      this.libParamsForm = {
        ...this.libParamsForm,
        current: 1,
        taskId: '',
        standbyTime: '',
        libraryTableName: '',
        taskState: ''
      }
      this.getLibData()
    },
    getDetail(log) {
      this.tableDetail = log
    },
    // 分页
    handleSizeChange1(val) {
      this.paramsForm.current = 1
      this.paramsForm.size = val
      this.getLibTaskData()
    },
    // 分页
    handleCurrentChange1(val) {
      this.paramsForm.current = val
      this.getLibTaskData()
    },
    // 分页
    handleSizeChange2(val) {
      this.libParamsForm.current = 1
      this.libParamsForm.size = val
      this.getLibData()
    },
    // 分页
    handleCurrentChange2(val) {
      this.libParamsForm.current = val
      this.getLibData()
    },
    dialogVisibleclose() {
      this.dialogVisible = false
      this.libParamsForm.current = 1
    },
    TableDataSearch() {
      this.libParamsForm.current = 1
      this.getLibData()
    },
    SourceDataSearch() {
      this.paramsForm.current = 1
      this.getLibTaskData()
    },
    handleSelectionChange(val){
      this.multipleSelection = val
    },
    rerun(){
      if(this.multipleSelection.length>0){
        this.$notify({
          title: '成功',
          message: '重跑执行成功',
          type: 'success',
        })
        logAnalysisApi.levelRetry(this.multipleSelection).then((res)=>{

        })
      }else{
        this.$notify.error({
          title: '错误',
          message: '请先选择要重跑的数据',
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
btn-group {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
</style>
